<template>
  <el-dialog
    :modelValue="modelValue"
    :title="isEdit ? '编辑任务' : '新增任务'"
    width="1200"
    align-center
    @close="handleClose"
    draggable
    destroy-on-close 
  >
    <div v-loading="loading">
      <el-form
        ref="formRef"
        :model="formValues"
        :rules="rules"
        label-position="top"
      >
        <el-form-item label="标题" prop="title">
          <el-input v-model="formValues.title" placeholder="请输入标题" />
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="截止日期" prop="deadline_time">
              <el-date-picker
                v-model="formValues.deadline_time"
                type="datetime"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
                placeholder="请选择"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="处理人" prop="processed_user">
              <Cascader
                v-model="formValues.processed_user"
                :multiple="false"
                style="width: 100%"
                :isSelfStyle="false"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="任务描述">
          <WangEditor v-model="formValues.content" />
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="handleSave" :loading="loading">
        保存
      </el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ElMessage } from "element-plus";
import { addTask, editTask } from "@/api/system/user.js";
import Cascader from "@/components/Cascader/index.vue";
import WangEditor from "@/components/WangEditor/index.vue";
// 声明接收参数
const props = defineProps({
  modelValue: { type: Boolean, default: false },
  id: { type: [String, Number], default: null },
  data: { type: Object, default: () => ({}) },
});
const formValues = ref({});
const isEdit = computed(() => !!props.id);
const emit = defineEmits(["update:modelValue", "close", "refresh"]);
const loading = ref(false);
const formRef = ref();
const rules = {
  title: [{ required: true, message: "请输入标题", trigger: "blur" }],
  processed_user: [
    { required: true, message: "请选择处理人", trigger: "change" },
  ],
  deadline_time: [
    { required: true, message: "请选择截止日期", trigger: "change" },
  ],
};
watch(
  () => props.data,
  (val) => {
    if (!val) return;
    formValues.value = val;
  }
);
const handleSave = () => {
  try {
    formRef.value?.validate(async (valid) => {
      if (valid) {
        const { code, message } = await (isEdit.value ? editTask : addTask)(
          formValues.value
        );
        if (code !== 200) {
          ElMessage.error(message);
          return;
        }
        ElMessage.success(isEdit.value ? "修改成功" : "保存成功");
        handleClose(true);
      } else {
        return false;
      }
    });
  } catch (e) {
    if (e.toString().includes(false)) {
      ElMessage.warning("请检查表单信息");
    }
    console.error(e);
  } finally {
    loading.value = false;
  }
};
const handleClose = async (refresh) => {
  formValues.value = {};
  await nextTick();
  formRef.value?.resetFields();
  emit("update:modelValue", false);
  emit("close");
  if (refresh) emit("refresh");
};
</script>

<style></style>
